<template>
  <div style="padding: 20px">
    <div v-for="(item, index) in form" :key="index" class="row">
      <div>{{ index + 1 }}.{{ item.subject }}</div>
      <div>
        <el-radio :disabled="isLook" v-model="item.isAbnormal" label="1"
          >正常</el-radio
        >
        <el-radio :disabled="isLook" v-model="item.isAbnormal" label="0"
          >异常</el-radio
        >
        <el-radio
          :disabled="isLook"
          v-model="item.isAbnormal"
          label="2"
          v-if="(sType == 19 || sType == 18) && index === 9"
          >未安装</el-radio
        >
      </div>
       <div style="height: 10px"></div>
    </div>
    <div style="height: 20px"></div>
    <el-input
      v-if="sType != 19 && sType != 18"
      placeholder="车辆摩托小时"
      v-model="vehicleMotorcycleHours"
      :disabled="isLook"
    >
      <template slot="prepend">车辆摩托小时：</template></el-input
    >
    <div style="height: 20px"></div>
    <el-input
      v-if="sType != 19 && sType != 18"
      placeholder="补加油量"
      v-model="refuelingVolume"
    >
      <template slot="prepend">补加油量：</template></el-input
    >
    <div style="height: 20px"></div>
    <el-input placeholder="备注" v-model="remarks" :disabled="isLook">
      <template slot="prepend">备注：</template></el-input
    >
    <div style="height: 60px"></div>
    <div class="bottom">
      <el-button block type="primary" @click="onSubmit"> 提交 </el-button>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import {
  inspectQueryById,
  inspectAdd,
  queryById,
  update,
} from "@/api/airport/inspect";
export default {
  components: {},
  computed: {
    isLook() {
      return this.$route.query.source === "edit";
    },
    aa1() {
      let flag = false;
      this.form.forEach((item) => {
        if (!item.isAbnormal) {
          flag = true;
        }
      });
      return flag;
    },
  },
  data() {
    return {
      result: "",
      // 表单参数
      formList: {},
      formTemp: [],
      form: [],
      a1: {},
      vehicleMotorcycleHours: 0,
      refuelingVolume: 0,
      remarks: "",
      loading: false,
      sType: "",
    };
  },
  created() {
    this.loading = true;
    if (this.$route.query.source === "add") {
      inspectQueryById({ id: this.$route.query.id })
        .then((res) => {
          this.a1 = res.data;
          this.formList = res.data.content;
          console.log(res.data.content, "res.data.content");
          this.sType = res.data.type;
          this.formList.forEach((item, sindex) => {
            if (item.status == null && item.status != 2) {
              this.form.push({
                isAbnormal: "",
                index: item.index,
                content: this.getContentList(item.contentNumber),
                contentNumber: item.contentNumber,
                contentType: item.contentType,
                subject: item.subject,
                isShowText: item.contentType === 2 ? true : false,
              });
            }
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    } else {
      inspectQueryById({ id: this.$route.query.type })
        .then((res) => {
          this.a1 = res.data;
          this.formList = res.data.content;
          this.sType = res.data.type;
          this.formList.forEach((item, sindex) => {
            this.formTemp.push({
              isAbnormal: "",
              index: item.index,
              content: this.getContentList(item.contentNumber),
              contentNumber: item.contentNumber,
              contentType: item.contentType,
              subject: item.subject,
              isShowText: item.contentType === 2 ? true : false,
            });
          });
          queryById({ id: this.$route.query.id })
            .then((res) => {
              const intersection = [];
              const item = res.data.inspectTerm;
              for (let object of this.formTemp) {
                if (
                  item.some((otherObject) => object.index === otherObject.index)
                ) {
                  intersection.push(object);
                }
              }
              item.forEach((item, index) => {
                intersection[index].isAbnormal = item.isAbnormal.toString();
                this.getContentEdit(intersection[index].content, item.content);
                if (intersection[index].contentType !== 2) {
                  intersection[index].isShowText = item.isAbnormal === 0;
                }
              });
              this.form = intersection;
              this.vehicleMotorcycleHours = res.data.vehicleMotorcycleHours;
              this.refuelingVolume = res.data.refuelingVolume;
              this.remarks = res.data.remarks;
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  methods: {
    aa3() {
      this.$refs.form
        .validate()
        .then(() => {
          const data = {};
          data.id = +this.$route.query.id;
          data.refuelingVolume = +this.refuelingVolume;
          update(data).then((res) => {
            this.$modal.msgSuccess("修改成功");
            this.$router.push({ name: "selectIn", replace: true });
          });
        })
        .catch(() => {
          //this.$showSuccessToast("修改成功");
        });
    },
    getContentList(num) {
      let arr = [];
      for (let i = 0; i < num; i++) {
        arr.push({ text: "" });
      }
      return arr;
    },
    getContentEdit(con1, con2) {
      con1.forEach((item, index) => {
        item.text = con2[index];
      });
    },
    getContentList(num) {
      let arr = [];
      for (let i = 0; i < num; i++) {
        arr.push({ text: "" });
      }
      return arr;
    },
    aa(item) {
      if (item.isAbnormal === "1") {
        item.content = this.getContentList(item.contentNumber);
        item.isShowText = false;
      } else if (item.isAbnormal === "2") {
        item.isShowText = false;
      } else {
        item.isShowText = true;
      }
    },

    selectType() {
      let data = this.form.filter((item, index) => {
        return item.isAbnormal === "";
      });
      if (!data.length) return;
      for (let i = 0; i < 10; i++) {
        if (data[i]) {
          data[i].isAbnormal = "1";
        }
      }
      console.log(data, "data");
    },
    onSubmit(values) {
      console.log(11111);
      console.log(this.form);
      const data = {};
      const inspect = [];

      this.form.forEach((item) => {
        const temp = [];
        for (let i of item.content) {
          temp.push(i.text);
        }
        inspect.push({
          content: temp,
          index: item.index,
          isAbnormal: item.isAbnormal,
        });
      });

      console.log(inspect, "inspect");
      data.inspectTerm = inspect;
      data.wagonNumber = this.$route.query.wagonNumber;
      data.type = +this.$route.query.id;
      data.applicableModels = this.$route.query.chexing;
      data.inspectDate = dayjs(this.$route.query.inspectDate).format(
        "YYYY-MM-DD HH:mm:ss"
      ); //这样处理之后就得到了形如 2022-02-10 14:44:30 这种格式的时间 ;
      data.signatureOfInspector = "0000";
      data.vehicleMotorcycleHours = +this.vehicleMotorcycleHours;
      data.refuelingVolume = +this.refuelingVolume;
      data.remarks = this.remarks;
      inspectAdd(data).then((res) => {
        this.$modal.msgSuccess("新增成功");
        this.$router.push({ name: "Daily", replace: true });
      });
    },
    handleChange(arr) {
      if (arr.indexOf(0) > -1) {
        //this.form.fishingPortManagement = [0];
        arr.map((item) => {
          if (item !== 0) {
            let index = this.form.fishingPortManagement.indexOf(item);
            this.form.fishingPortManagement.splice(index, 1);
          }
        });
      }
    },
    confirm(item) {
      this.form.boatId = item.id;
      this.form.boatName = item.boatCnName;
      this.form.masterName = item.boatOwner;
      this.form.masterPhone = item.ownerTelephone;
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-font-size);
  font-size: var(--van-cell-font-size);

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    pointer-events: none;
    border-bottom: 1px solid var(--van-cell-border-color);
    transform: scaleY(0.5);
  }
}

.head {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.mt46 {
  padding-bottom: 156px;
}

.aaa {
  position: fixed;
  bottom: 72px;
  font-size: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
